<template>
	<div class="common-layout">
		<el-header>
			<label>订单详情</label>
			<el-form>
				<el-switch v-model="dle" active-color="#13ce66"  inactive-color="#ff4949" active-text="已付款" inactive-text="未付款" />
				<el-date-picker type="daterange" v-model="val" start-placeholder="订单起始时间" end-placeholder="订单结束时间"></el-date-picker>
				<el-button @click="seaPay()">查询</el-button>
			</el-form>
		</el-header>
		<el-container>
			<el-table :data="orderlist" empty-text="没有数据">
				<el-table-column prop="ordid" label="订单号" width="70"/>
				<el-table-column prop="addr" label="收货地址" width="200" />
				<el-table-column prop="phone" label="电话" width="150" />
				<el-table-column prop="shipno" label="发货单号" width="150" />
				<el-table-column prop="amount" label="总价" />
				<el-table-column label="是否付款">
					<template #default="score">{{filpay(score.row.ispay)}}</template>
				</el-table-column>
				<el-table-column label="下单时间">
					<template #default="score">{{fildate(score.row.tcreate)}}</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="score">
						<el-popover placement="left" :width="700" trigger="click" :title="`${score.row.ordid} 订单，发往：${score.row.addr}`">
						    <template #reference>
								<el-button @click="getInfo(score.row.ordid)">明细</el-button>
						    </template>
						    <el-table :data="arr" empty-text="没有数据">
						      <el-table-column label="图片">
								<template #default="sc">
									<el-image :src="`${$Imgurl}/showImg/${sc.row.picture}`"></el-image>
								</template>
							  </el-table-column>
						      <el-table-column property="name" label="商品名称"></el-table-column>
						      <el-table-column property="price" label="商品价钱"></el-table-column>
							  <el-table-column property="num" label="商品数量"></el-table-column>
							  <el-table-column label="商品总价">
								  <template #default="sc">{{sc.row.price*sc.row.num}}</template>
							  </el-table-column>
						    </el-table>
						  </el-popover>
					</template>
				</el-table-column>
			</el-table>
		</el-container>
		<el-button @click="page++" type="primary">查看更多</el-button>
	</div>
</template>

<script>
	//引入拦截器
	import instance from '../../../../ajax'
	
	export default{
		name:'Orders',
		data(){
			return{
				dle:false,
				orderlist:[],
				num:5,
				page:0,
				val:[
					new Date(2021, 3, 1),
					new Date(),
				],
				arr:[]
			}
		},
		created() {
			let t1=this.val[0].getTime()
			let t2=this.val[1].getTime()
			this.getOrd(this.page,t1,t2)
		},
		methods:{
			getOrd(p,t1,t2){
				let that=this
				instance.get(`/api/fore/ord/findOrdLineByPage/${p}/${that.num}`).then((res)=>{
					let arr=res.data.data.orders
					for(let i in arr){
						if(arr[i].ispay==this.dle){
							if(arr[i].tcreate>=t1&&arr[i].tcreate<=t2){
								that.orderlist=that.orderlist.concat(arr[i])
							}
						}
					}
				}).catch((error)=>{
					
				})
			},
			seaPay(){
				this.orderlist=[]
				let t1,t2
				if(this.val[0].$d==undefined){
					t1=this.val[0].getTime()
					t2=this.val[1].getTime()
				}else{
					t1=this.val[0].$d.getTime()
					t2=this.val[1].$d.getTime()
				}
				for(let i=0;i<=this.page;i++){
					this.getOrd(i,t1,t2)
				}
			},
			getInfo(id){
				instance.get(`/api/adm/ord/findItemInfoByOrdid/${id}`).then((res)=>{
					if (res.data.code==200) {
						this.arr=res.data.data
					}
				}).catch((error)=>{
					
				})
			}
		},
		watch:{
			page(){
				this.seaPay()//根据查询日期懒加载
			},
			dle(){
				this.seaPay()//根据查询日期显示付款状态
			}
		},
		computed:{
			fildate(){
				return(t)=>{
					let day=new Date(t)
					return `${day.getFullYear()}-${day.getMonth()+1}-${day.getDate()}`
				}
			},
			filpay(){
				return(t)=>{
					return t==1?'已付款':'未付款'
				}
			}
		},
	}
</script>

<style scoped>
	.el-container{
		width: 70%;
		margin: 0 auto;
	}
	.el-header{
		width: 70%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.el-header .el-form{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 63%;
	}
	.el-popover .el-image{
		width: 40%;
	}
	.common-layout{
		text-align: center;
	}
</style>
